<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 岗位管理
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-button
                        type="primary"
                        icon="el-icon-delete"
                        class="handle-del mr10"
                        @click="delAllSelection"
                >批量删除</el-button>
                <el-input v-model="query.id" placeholder="文贴ID" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
            </div>
            <el-table
                    :data="tableData"
                    border
                    class="table"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                    @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
                <el-table-column prop="title" label="标题"></el-table-column>
                <el-table-column id="test" prop="description" label="帖子描述" ></el-table-column>
                <el-table-column prop="content" :show-overflow-tooltip="true" label="文章概要"></el-table-column>
                <el-table-column
                        prop="createTime"
                        label="发表日期"
                        :formatter="dateFormat"
                        align="center"
                ></el-table-column>
                <el-table-column
                        prop="updateTime"
                        label="修改日期"
                        :formatter="dateFormat"
                        align="center"
                ></el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button
                                type="text"
                                icon="el-icon-delete"
                                class="red"
                                @click="handleDelete(scope.$index, scope.row)"
                        >删除</el-button>
                        <el-button
                                type="text"
                                icon="el-icon-s-opportunity"
                                @click="handleEssence(scope.$index, scope.row)"
                        >置顶</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                        background
                        layout="prev, pager, next"
                        :current-page="current"
                        :page-size="size"
                        :total="total"
                        @current-change="getData"
                ></el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    //导入Stat对应的api
    import {getPostById} from '../../network/post';
    import { updateStatData } from '../../api/apis/stat';
    import { deleteStatById } from '../../api/apis/stat';
    import { addStat } from '../../api/apis/stat';
    import {postlist} from '../../network/post';
    import {postdelete} from '../../network/post';
    import {doEssence} from '../../network/post'

    //这里要引入表单验证规则
    import valrule from '../../config/validaterule';
    import { search } from '../../network/fuzzysearch';
    import { userdelete } from '../../network/userdelete';

    export default {
        name: 'stat',
        data() {
            return {
                query: {
                    id: '', //岗位id
                    title: '', //岗位名称
                    pageIndex: 1, //当前请求页
                    pageSize: 5 //一页显示的数据条数
                },
                //添加的相关参数
                add: {
                    name: '', //岗位名称
                    num: '', //岗位编制
                    type: '' //岗位类型
                },
                tableData: [], //获取的数据
                multipleSelection: [],
                delList: [],
                editVisible: false, //编辑弹出框false隐藏，true显示
                addVisible: false, //新建弹出框false隐藏，true显示
                form: {},
                current:1,
                total:0,
                size: 10,
                idx: -1,
                id: -1
            };
        },
        created() {
            this.getData();
        },
        methods: {
            //时间格式化
            dateFormat(row, column) {
                var dT = new Date(row.createTime); //row 表示一行数据, dateTime 表示要格式化的字段名称
                return dT.getFullYear() + '-' + (dT.getMonth() + 1) + '-' + dT.getDate();
            },


            //初始化数据
            getData(current) {
                // let queryForm = this.queryIsNull();
                // console.log('表单');
                // console.log(queryForm);

                postlist(current)
                    .then((res) => {
                        console.log(res);
                        if (res.code === 200) {
                            console.log(res);
                            this.tableData = res.data.list;
                            // this.total
                            this.current=res.data.current;
                            this.size=res.data.size;
                            this.total = res.data.total;
                        } else {
                            this.$message.error('数据获取失败，' + res.msg);
                        }
                    })
                    .catch(() => {
                        this.$message.error('数据获取失败，请在保证网络畅通的情况下检查请求的地址或参数是否正确');
                    });
            },
            // 新建操作
            handleAdd() {
                //alert("即将进入新建页面")
                this.addVisible = true;
            },
            // 保存新建
            saveAdd(add) {
                console.log('添加');
                console.log(this.add);
                this.$refs[add].validate((valid) => {
                    if (valid) {
                        this.addVisible = false;
                        addStat(this.add)
                            .then((res) => {
                                console.log(res);
                                if (res.state === 200) {
                                    this.$message.success('新建岗位成功');
                                    this.getData();
                                } else {
                                    this.$message.error('新建岗位失败');
                                    this.getData();
                                }
                                this.addVisible = false;
                            })
                            .catch(() => {
                                this.$message.error('数据获取失败，请在保证网络畅通的情况下检查请求的地址是否 正确');
                            });
                    } else {
                        this.$message.error('请按照指定格式输入');
                        return false;
                    }
                });
            },
            // 编辑操作
            handleEdit(index, row) {
                //alert("即将进入编辑页面")
                this.idx = index;
                this.form = row;
                this.editVisible = true;
            },
            // 保存编辑
            saveEdit(form) {
                console.log('编辑');
                console.log(this.form);
                this.$refs[form].validate((valid) => {
                    if (valid) {
                        updateStatData(this.form)
                            .then((res) => {
                                console.log(res);

                                if (res.state === 200) {
                                    //表示更新成功
                                    this.editVisible = false;
                                    this.$message.success(`修改第 ${this.idx + 1} 行成功`);
                                    this.$set(this.tableData, this.idx, this.form);
                                    this.getData();
                                } else {
                                    //表示更新失败
                                    this.editVisible = false;
                                    this.$message.error(`修改第 ${this.idx + 1} 行失败`);
                                    this.getData();
                                }
                            })
                            .catch(() => {
                                this.$message.error('数据获取失败，请在保证网络畅通的情况下检查请求的地址是否正确');
                            });
                    } else {
                        this.$message.error('请按照指定格式输入');
                        return false;
                    }
                });
            },
            // 触发搜索按钮
            handleSearch() {
                // this.getData();
                console.log('表单');
                //dateFormat
                if(this.query.id==''){
                    this.getData();
                }else {
                    getPostById(this.query.id)
                        .then((res) => {
                            if (res.code === 200) {
                                console.log(res);
                                this.tableData = []
                                let info = {
                                    id: res.data.id,
                                    username: res.data.user.username,
                                    description: res.data.description,
                                    content: res.data.content,
                                    createTime: res.data.createTime,
                                    updateTime: res.data.updateTime,
                                }

                                this.tableData.push(info)
                                console.warn(this.tableData)
                                this.size = 1;
                                this.current = 1;
                                this.total = 1;
                            } else {
                                this.$message.error('数据获取失败，' + res.msg);
                            }
                        })
                        .catch(() => {
                            this.$message.error('数据获取失败，请在保证网络畅通的情况下检查请求的地址或参数是否正确');
                        });
                }
            },

            // 删除操作
            handleDelete(index, row) {
                // 二次确认删除
                this.$confirm('确定要删除吗？', '提示', {
                    type: 'warning'
                }).then(() => {
                    postdelete(row.id).then((res) => {
                        alert(row.id);
                        console.log(res);
                        if (res.code === 200) {
                            this.$message.success('删除成功');
                            //this.tableData.splice(index, 1);
                            this.getData();
                        } else {
                            this.$message.error('删除失败');
                            this.getData();
                        }
                    });
                });
            },
            // 多选操作
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            delAllSelection() {
                const length = this.multipleSelection.length;
                this.delList = this.delList.concat(this.multipleSelection);
                for (let i = 0; i < length; i++) {
                    let str = this.multipleSelection[i].name;
                    postdelete(this.multipleSelection[i].id )
                        .then((res) => {
                            console.log(res);
                            if (res.code === 200) {
                                this.$message.success('删除' + str + '成功');
                            } else {
                                this.$message.success('删除' + str + '失败');
                            }
                        })
                        .catch(() => {
                            this.$message.error('数据获取失败，请在保证网络畅通的情况下检查请求的地址是否正确');
                        });
                }
                this.getData();
                this.multipleSelection = [];
            },
            // 查询操作
            handleEssence(index, row) {
                // alert('操作');

                    doEssence( row.id ).then((res) => {
                        console.log(res);
                        if (res.code === 200) {
                            this.$message.success('加精成功');
                            //this.tableData.splice(index, 1);
                            this.getData();
                        } else {
                            this.$message.error('加精失败');
                            this.getData();
                        }
                    });

            },
            // 分页导航
            handlePageChange(val) {
                alert('请求的页数：' + val);

                // 调用方法：this.$set( target, key, value )
                // target：要更改的数据源(可以是对象或者数组)
                // key：要更改的具体数据
                // value ：重新赋的值
                this.$set(this.query, 'pageIndex', val);
                this.getData();
            }
        }
    };
</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    #test{
        overflow: hidden;
    }
    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .table {
        width: 100%;
        font-size: 14px;
    }
    .red {
        color: #ff0000;
    }
    .mr10 {
        margin-right: 10px;
    }
    .table-td-thumb {
        display: block;
        margin: auto;
        width: 40px;
        height: 40px;
    }
</style>
